<template>
  <div class="management-page">
    <div class="page-header">
      <p>管理系统课程信息</p>
    </div>

    <!-- 标签页 -->
    <div class="tabs-container">
      <div class="tabs-header">
        <button
            class="tab-button"
            :class="{ active: activeTab === 'active' }"
            @click="activeTab = 'active'"
        >
          <i class="fa fa-list-alt"></i>
          上架课程列表
        </button>
        <button
            class="tab-button"
            :class="{ active: activeTab === 'deactivated' }"
            @click="activeTab = 'deactivated'"
        >
          <i class="fa fa-archive"></i>
          已下架课程列表
        </button>
      </div>

      <div class="tab-content">
        <!-- 上架课程列表 -->
        <div v-if="activeTab === 'active'" class="tab-pane active">
          <div class="content-card">
            <div class="card-header">
              <h3>上架课程列表</h3>
              <div class="header-actions">
                <div class="search-container">
                  <input
                    type="text"
                    v-model="activeSearchQuery"
                    class="search-input"
                    placeholder="搜索课程名称、教练或等级"
                    @keyup.enter="searchActiveCourses"
                  />
                  <button class="search-btn" @click="searchActiveCourses">
                    <i class="fa fa-search"></i>
                  </button>
                  <button v-if="activeSearchQuery" class="clear-btn" @click="clearActiveSearch">
                    <i class="fa fa-times"></i>
                  </button>
                </div>
                <button class="btn-primary" @click="showAddModal = true">
                  <i class="fa fa-plus"></i>
                  新增课程
                </button>
                <button class="btn-secondary" @click="refreshData">
                  <i class="fa fa-refresh"></i>
                  刷新
                </button>
              </div>
            </div>

            <div class="card-body">
              <div class="table-container">
                <table class="data-table">
                  <thead>
                  <tr>
                    <th>课程ID</th>
                    <th>课程名称</th>
                    <th>教练</th>
                    <th>课程等级</th>
                    <th>上课时间</th>
                    <th>时长(分钟)</th>
                    <th>最大人数</th>
                    <th>当前人数</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="course in courses" :key="course.cId">
                    <td>{{ course.cId }}</td>
                    <td>{{ course.cName }}</td>
                    <td>{{ course.coach_name }}</td>
                    <td>{{ course.cGrade }}</td>
                    <td>{{ formatDateTime(course.cTime) }}</td>
                    <td>{{ course.cDuration }}</td>
                    <td>{{ course.cMax }}</td>
                    <td>{{ course.cCurrent }}</td>
                    <td>
                      <span class="status-badge" :class="getRunStatusClass(course.c_run_status)">
                        {{ course.c_run_status }}
                      </span>
                    </td>
                    <td>
                      <div class="action-buttons">
                        <button class="btn-action btn-info" @click="editCourse(course)">编辑</button>
                        <button class="btn-action btn-danger" @click="deactivateCourse(course.cId)">下架</button>
                      </div>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <div v-if="courses.length === 0" class="empty-state">
                  <i class="fa fa-book"></i>
                  <p>暂无上架课程</p>
                </div>
              </div>

              <!-- 分页组件 -->
              <div class="pagination-container" v-if="total > 0">
                <div class="pagination-info">
                  共 {{ total }} 条记录，第 {{ currentPage }} / {{ totalPages }} 页
                </div>
                <div class="pagination-controls">
                  <button 
                    class="pagination-btn" 
                    :disabled="currentPage === 1"
                    @click="handlePageChange(1)"
                  >
                    首页
                  </button>
                  <button 
                    class="pagination-btn" 
                    :disabled="currentPage === 1"
                    @click="handlePageChange(currentPage - 1)"
                  >
                    上一页
                  </button>
                  <button 
                    class="pagination-btn" 
                    :disabled="currentPage === totalPages"
                    @click="handlePageChange(currentPage + 1)"
                  >
                    下一页
                  </button>
                  <button 
                    class="pagination-btn" 
                    :disabled="currentPage === totalPages"
                    @click="handlePageChange(totalPages)"
                  >
                    末页
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

    <!-- 编辑课程模态框 -->
    <div class="modal-overlay" v-if="showEditModal" @click="closeEditModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>编辑课程</h3>
          <button class="close-btn" @click="closeEditModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>课程名称</label>
            <input type="text" v-model="editForm.cName" class="form-input">
          </div>
          <div class="form-group">
            <label>课程等级</label>
            <input type="text" v-model="editForm.cGrade" class="form-input">
          </div>
          <div class="form-group">
            <label>课程简介</label>
            <textarea v-model="editForm.cIntroduction" class="form-input"></textarea>
          </div>
          <div class="form-group">
            <label>教练</label>
            <select v-model="editForm.cTId" class="form-input coach-select">
              <option value="">请选择教练</option>
              <option v-for="coach in coaches" :key="coach.id" :value="coach.id">
                {{ coach.name }} ({{ coach.specialty || '暂无专长' }})
                </option>
            </select>
          </div>
          <div class="form-group">
            <label>上课时间</label>
            <input type="datetime-local" v-model="editForm.cTime" class="form-input">
          </div>
          <div class="form-group">
            <label>课程时长(分钟)</label>
            <input type="number" v-model="editForm.cDuration" class="form-input">
          </div>
          <div class="form-group">
            <label>最大人数</label>
            <input type="number" v-model="editForm.cMax" class="form-input">
          </div>
          <div class="form-group">
            <label>课程状态</label>
            <select v-model="editForm.cStatus" class="form-input">
              <option :value="1">上架</option>
              <option :value="0">下架</option>
            </select>
          </div>
          <div class="form-group">
            <label>课程图片</label>
            <div v-if="editForm.cImage" class="image-preview">
              <img :src="editForm.cImage" alt="课程图片预览" />
              <button class="remove-image-btn" @click="editForm.cImage = ''">移除图片</button>
            </div>
            <input type="text" v-model="editForm.cImage" class="form-input" placeholder="输入图片URL">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-secondary" @click="closeEditModal">取消</button>
          <button class="btn-primary" @click="saveEdit">保存</button>
        </div>
      </div>
    </div>

    <!-- 新增课程模态框 -->
    <div class="modal-overlay" v-if="showAddModal" @click="closeAddModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>新增课程</h3>
          <button class="close-btn" @click="closeAddModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>课程名称</label>
            <input type="text" v-model="addForm.cName" class="form-input">
          </div>
          <div class="form-group">
            <label>课程等级</label>
            <input type="text" v-model="addForm.cGrade" class="form-input">
          </div>
          <div class="form-group">
            <label>课程简介</label>
            <textarea v-model="addForm.cIntroduction" class="form-input"></textarea>
          </div>
          <div class="form-group">
            <label>教练</label>
            <select v-model="addForm.cTId" class="form-input coach-select">
              <option value="">请选择教练</option>
              <option v-for="coach in coaches" :key="coach.id" :value="coach.id">
                {{ coach.name }} ({{ coach.specialty || '暂无专长' }})
                </option>
            </select>
          </div>
          <div class="form-group">
            <label>上课时间</label>
            <input type="datetime-local" v-model="addForm.cTime" class="form-input">
          </div>
          <div class="form-group">
            <label>课程时长(分钟)</label>
            <input type="number" v-model="addForm.cDuration" class="form-input">
          </div>
          <div class="form-group">
            <label>最大人数</label>
            <input type="number" v-model="addForm.cMax" class="form-input">
          </div>
          <div class="form-group">
            <label>课程状态</label>
            <select v-model="addForm.cStatus" class="form-input">
              <option :value="1">上架</option>
              <option :value="0">下架</option>
            </select>
          </div>
          <div class="form-group">
            <label>课程图片</label>
            <div v-if="addForm.cImage" class="image-preview">
              <img :src="addForm.cImage" alt="课程图片预览" />
              <button class="remove-image-btn" @click="addForm.cImage = ''">移除图片</button>
            </div>
            <input type="text" v-model="addForm.cImage" class="form-input" placeholder="输入图片URL">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-secondary" @click="closeAddModal">取消</button>
          <button class="btn-primary" @click="saveAdd">保存</button>
        </div>
      </div>
    </div>
    
        <!-- 已下架课程列表 -->
        <div v-if="activeTab === 'deactivated'" class="tab-pane" :class="{ active: activeTab === 'deactivated' }">
          <div class="content-card">
            <div class="card-header">
              <h3>已下架课程列表</h3>
              <div class="header-actions">
                <div class="search-container">
                  <input
                    type="text"
                    v-model="deactivatedSearchQuery"
                    class="search-input"
                    placeholder="搜索课程名称、教练或等级"
                    @keyup.enter="searchDeactivatedCourses"
                  />
                  <button class="search-btn" @click="searchDeactivatedCourses">
                    <i class="fa fa-search"></i>
                  </button>
                  <button v-if="deactivatedSearchQuery" class="clear-btn" @click="clearDeactivatedSearch">
                    <i class="fa fa-times"></i>
                  </button>
                </div>
                <button class="btn-secondary" @click="loadDeactivatedCourses()">
                  <i class="fa fa-refresh"></i>
                  刷新
                </button>
              </div>
            </div>
            
            <div class="card-body">
              <div class="table-container">
                <table class="data-table">
                  <thead>
                  <tr>
                    <th>课程ID</th>
                    <th>课程名称</th>
                    <th>教练</th>
                    <th>课程等级</th>
                    <th>上课时间</th>
                    <th>时长(分钟)</th>
                    <th>最大人数</th>
                    <th>当前人数</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="course in deactivatedCourses" :key="'deactivated-' + course.cId">
                    <td>{{ course.cId }}</td>
                    <td>{{ course.cName }}</td>
                    <td>{{ course.coach_name }}</td>
                    <td>{{ course.cGrade }}</td>
                    <td>{{ formatDateTime(course.cTime) }}</td>
                    <td>{{ course.cDuration }}</td>
                    <td>{{ course.cMax }}</td>
                    <td>{{ course.cCurrent }}</td>
                    <td>
                      <div class="action-buttons">
                        <button class="btn-action btn-success" @click="activateCourse(course.cId)">上架</button>
                      </div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <div v-if="deactivatedCourses.length === 0" class="empty-state">
                <i class="fa fa-archive"></i>
                <p>暂无已下架课程</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue'

export default {
  name: 'CourseManagement',
  setup() {
    const courses = ref([])
    const deactivatedCourses = ref([])
    const coaches = ref([])
    const currentPage = ref(1)
    const pageSize = ref(6)
    const total = ref(0)
    const totalPages = ref(0)
    const showEditModal = ref(false)
    const showAddModal = ref(false)
    const activeTab = ref('active')
    const activeSearchQuery = ref('')
    const deactivatedSearchQuery = ref('')
    
    // 编辑表单
    const editForm = reactive({
      cId: null,
      cName: '',
      cGrade: '',
      cIntroduction: '',
      cTId: null,
      cTime: '',
      cDuration: null,
      cMax: null,
      cStatus: 1,
      cImage: ''
    })
    
    // 新增表单
    const addForm = reactive({
      cName: '',
      cGrade: '',
      cIntroduction: '',
      cTId: null,
      cTime: '',
      cDuration: null,
      cMax: null,
      cStatus: 1,
      cImage: ''
    })

    // 加载教练列表
    const loadCoaches = async () => {
      try {
        // 使用正确的API路径
        const response = await fetch('/api/coaches/all')
        const result = await response.json()
        // 根据后端返回的结构提取数据
        coaches.value = result.data || []
        // 调试：打印第一个教练对象的结构
        if (coaches.value.length > 0) {
          console.log('教练数据结构示例:', coaches.value[0])
        }
      } catch (error) {
        console.error('获取教练列表失败:', error)
        alert('获取教练列表失败，请稍后重试')
      }
    }
    
    // 格式化日期时间
    const formatDateTime = (dateTime) => {
      if (!dateTime) return ''
      const date = new Date(dateTime)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    // 获取运行状态样式类
    const getRunStatusClass = (status) => {
      switch(status) {
        case '即将开始':
          return 'status-upcoming'
        case '进行中':
          return 'status-active'
        case '已结束':
          return 'status-inactive'
        default:
          return ''
      }
    }

    // 加载课程数据 - 只加载上架课程
    const loadCourses = async () => {
      try {
        // 构建请求URL，包含搜索参数
        let url = `/api/courses/admin/page?page=${currentPage.value}&size=${pageSize.value}&status=1`
        if (activeSearchQuery.value.trim()) {
          url += `&search=${encodeURIComponent(activeSearchQuery.value.trim())}`
        }
        
        const response = await fetch(url)
        const result = await response.json()
        
        courses.value = result.data || []
        // 使用服务器返回的总数量，而不是客户端过滤后的数量
        total.value = result.total || 0
        totalPages.value = Math.ceil(total.value / pageSize.value)
      } catch (error) {
        console.error('获取课程列表失败:', error)
        alert('获取课程列表失败，请稍后重试')
      }
    }
    
    // 搜索上架课程
    const searchActiveCourses = () => {
      currentPage.value = 1
      loadCourses()
    }
    
    // 清除上架课程搜索
    const clearActiveSearch = () => {
      activeSearchQuery.value = ''
      currentPage.value = 1
      loadCourses()
    }

    // 刷新数据
    const refreshData = () => {
      currentPage.value = 1
      loadCourses()
      loadDeactivatedCourses()
    }
    
    // 加载已下架课程
    const loadDeactivatedCourses = async () => {
      try {
        const response = await fetch('/api/courses/admin/all')
        const result = await response.json()
        
        // 过滤出状态为0（下架）的课程
        let filtered = result.filter(course => course.cStatus === 0)
        
        // 如果有搜索关键词，进行客户端过滤
        if (deactivatedSearchQuery.value.trim()) {
          const searchTerm = deactivatedSearchQuery.value.toLowerCase().trim()
          filtered = filtered.filter(course => 
            course.cName.toLowerCase().includes(searchTerm) ||
            (course.coach_name && course.coach_name.toLowerCase().includes(searchTerm)) ||
            (course.cGrade && course.cGrade.toLowerCase().includes(searchTerm))
          )
        }
        
        deactivatedCourses.value = filtered
      } catch (error) {
        console.error('获取已下架课程列表失败:', error)
        alert('获取已下架课程列表失败，请稍后重试')
      }
    }
    
    // 搜索已下架课程
    const searchDeactivatedCourses = () => {
      loadDeactivatedCourses()
    }
    
    // 清除已下架课程搜索
    const clearDeactivatedSearch = () => {
      deactivatedSearchQuery.value = ''
      loadDeactivatedCourses()
    }

    // 处理分页
    const handlePageChange = (page) => {
      if (page >= 1 && page <= totalPages.value) {
        currentPage.value = page
        loadCourses()
      }
    }

    // 编辑课程
    const editCourse = (course) => {
      // 填充编辑表单
      editForm.cId = course.cId
      editForm.cName = course.cName
      editForm.cGrade = course.cGrade
      editForm.cIntroduction = course.cIntroduction || ''
      editForm.cTId = course.cTId
      editForm.cTime = course.cTime ? course.cTime.replace('Z', '') : ''
      editForm.cDuration = course.cDuration
      editForm.cMax = course.cMax
      editForm.cStatus = course.cStatus
      editForm.cImage = course.cImage || ''
      
      showEditModal.value = true
    }

    // 关闭编辑模态框
    const closeEditModal = () => {
      showEditModal.value = false
      // 重置表单
      Object.keys(editForm).forEach(key => {
        editForm[key] = key === 'cStatus' ? 1 : ''
      })
    }

    // 保存编辑
    const saveEdit = async () => {
      try {
        const response = await fetch(`/api/courses/${editForm.cId}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(editForm)
        })
        
        const result = await response.text()
        if (response.ok) {
          alert('课程更新成功')
          closeEditModal()
          loadCourses()
        } else {
          alert('课程更新失败: ' + result)
        }
      } catch (error) {
        console.error('更新课程失败:', error)
        alert('更新课程失败，请稍后重试')
      }
    }

    // 关闭新增模态框
    const closeAddModal = () => {
      showAddModal.value = false
      // 重置表单
      Object.keys(addForm).forEach(key => {
        addForm[key] = key === 'cStatus' ? 1 : ''
      })
    }

    // 保存新增
    const saveAdd = async () => {
      try {
        const response = await fetch('/api/courses', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(addForm)
        })
        
        const result = await response.text()
        if (response.ok) {
          alert('课程创建成功')
          closeAddModal()
          refreshData()
        } else {
          alert('课程创建失败: ' + result)
        }
      } catch (error) {
        console.error('创建课程失败:', error)
        alert('创建课程失败，请稍后重试')
      }
    }

    // 下架课程
    const deactivateCourse = (courseId) => {
      if (confirm('确定要下架这个课程吗？')) {
        performDeactivate(courseId)
      }
    }

    // 执行下架
    const performDeactivate = async (courseId) => {
      try {
        const response = await fetch(`/api/courses/${courseId}/status?status=0`, {
          method: 'PUT'
        })
        
        const result = await response.text()
        if (response.ok) {
          alert('课程下架成功')
          loadCourses()
          loadDeactivatedCourses()
        } else {
          alert('课程下架失败: ' + result)
        }
      } catch (error) {
        console.error('下架课程失败:', error)
        alert('下架课程失败，请稍后重试')
      }
    }

    // 上架课程
    const activateCourse = async (courseId) => {
      if (confirm('确定要上架这个课程吗？')) {
        try {
          const response = await fetch(`/api/courses/${courseId}/status?status=1`, {
            method: 'PUT'
          })
          
          const result = await response.text()
          if (response.ok) {
            alert('课程上架成功')
            loadCourses()
            loadDeactivatedCourses()
          } else {
            alert('课程上架失败: ' + result)
          }
        } catch (error) {
          console.error('上架课程失败:', error)
          alert('上架课程失败，请稍后重试')
        }
      }
    }

    // 图片上传功能已移除，保留手动输入图片URL功能

    onMounted(() => {
      loadCourses()
      loadDeactivatedCourses()
      loadCoaches()
    })

    return {
      courses,
      deactivatedCourses,
      coaches,
      currentPage,
      total,
      totalPages,
      showEditModal,
      showAddModal,
      editForm,
      addForm,
      activeTab,
      activeSearchQuery,
      deactivatedSearchQuery,
      formatDateTime,
      getRunStatusClass,
      editCourse,
      closeEditModal,
      saveEdit,
      closeAddModal,
      saveAdd,
      deactivateCourse,
      activateCourse,
      handlePageChange,
      refreshData,
      searchActiveCourses,
      clearActiveSearch,
      searchDeactivatedCourses,
      clearDeactivatedSearch,
      loadDeactivatedCourses,
      loadCoaches
    }
  }
}
</script>

<style scoped>
.management-page {
  padding: 0;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h2 {
  color: #f8fafc;
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
}

.page-header p {
  color: #94a3b8;
  margin: 0;
}

/* 标签页样式 */
.tabs-container {
  margin-bottom: 2rem;
}

.tabs-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  background: rgba(15, 23, 42, 0.4);
  padding: 0.5rem;
  border-radius: 12px;
}

.tab-button {
  flex: 1;
  padding: 0.8rem 1.5rem;
  border: none;
  background: none;
  color: #94a3b8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
}

.tab-button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e0;
}

.tab-button.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.tab-content {
  min-height: 200px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #94a3b8;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.content-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }

  .card-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.4);
  }

  .card-header h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 1.2rem;
  }

  .header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .search-container {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 0.5rem;
  }

  .search-input {
    padding: 0.5rem 0.75rem;
    padding-right: 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.9rem;
    width: 250px;
    color: #f8fafc;
    outline: none;
    transition: all 0.2s ease;
  }

  .search-input:focus {
    border-color: #667eea;
    background: rgba(255, 255, 255, 0.08);
  }

  .search-btn,
  .clear-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #94a3b8;
    transition: color 0.3s;
  }

  .search-btn:hover,
  .clear-btn:hover {
    color: #667eea;
  }

  .clear-btn {
    right: 25px;
  }

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.card-body {
  padding: 1.5rem;
}

.table-container {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.data-table th {
  background: rgba(15, 23, 42, 0.4);
  color: #cbd5e0;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.btn-action {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-info {
  background: rgba(102, 126, 234, 0.15);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.btn-danger {
  background: rgba(229, 62, 62, 0.15);
  color: #e53e3e;
  border: 1px solid rgba(229, 62, 62, 0.3);
}

/* 新增成功按钮样式 */
.btn-action.btn-success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.btn-action.btn-success:hover {
  background: rgba(34, 197, 94, 0.25);
  color: white;
}

.btn-action:hover {
  transform: translateY(-1px);
}

.btn-info:hover {
  background: rgba(102, 126, 234, 0.25);
  color: white;
}

.btn-danger:hover {
  background: rgba(229, 62, 62, 0.25);
  color: white;
}

.status-badge {
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-badge.status-upcoming {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-badge.status-active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.status-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

.pagination-info {
  color: #94a3b8;
  font-size: 0.9rem;
}

.pagination-controls {
  display: flex;
  gap: 0.5rem;
}

.pagination-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.2rem;
}

.close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.modal-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #cbd5e0;
  font-weight: 600;
}

.form-input {
  width: 100%;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #f8fafc;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #667eea;
  background: rgba(255, 255, 255, 0.08);
}

.form-input::placeholder {
  color: #64748b;
}

/* 教练选择框特殊样式 */
.coach-select {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.1);
}

.coach-select option {
  color: #1e293b;
  background: #f8fafc;
}

.coach-select:focus {
  color: #f8fafc;
}

textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

/* 图片预览样式 */
.image-preview {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.image-preview img {
  max-width: 150px;
  max-height: 100px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.remove-image-btn {
  background: rgba(229, 62, 62, 0.15);
  color: #e53e3e;
  border: 1px solid rgba(229, 62, 62, 0.3);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.remove-image-btn:hover {
  background: rgba(229, 62, 62, 0.25);
  color: white;
}

.file-input {
  margin-top: 0.5rem;
  color: #cbd5e0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .modal-content {
    width: 95%;
    margin: 1rem;
  }
  
  .tabs-header {
    flex-direction: column;
  }
}
</style>